<template>
  <div class="pdf">
    <div class="pdf-header">
      <div>
        <el-input clearable v-model="searchData" prefix-icon="el-icon-search" @input="filterSearchData"></el-input>
      </div>
      <div>
        <el-button type="primary" plain @click="addPdf">新增</el-button>
        <el-button type="danger" plain @click="showDelPDF = !showDelPDF">删除</el-button>
      </div>
    </div>
    <div v-for="(item, index) in searchFileData" :key="index">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ Object.keys(item)[0] }}</span>
          <!-- <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="addPdf(item)"
            >新增</el-button
          >-->
        </div>
        <div class="card-body">
          <div v-for="(items, index) in item[Object.keys(item)[0]]" :key="index">
            <pdf-item @refresh="searchFile" :pdfData="items" :showDelPDF="showDelPDF"></pdf-item>
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="45%">
      <el-form label-position="top" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div>
          <el-form-item label="上传" prop="name">
            <el-upload ref="upload" multiple :limit="5" action :auto-upload="false" :on-change="changeFile">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">只能上传pdf/word文件，且不超过5个</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="文件类型" prop="name" style="width: 40%; display: inline-block">
            <el-input v-model="ruleForm.type"></el-input>
          </el-form-item>
          <el-form-item label="技术方向" prop="name" style="width: 40%;margin-left:20px; display: inline-block">
            <el-input v-model="ruleForm.direction"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetruleForm();dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import pdfItem from './pdfItem.vue'
type fileType = ['pdf', 'word']
type ruleForm = { direction: string; type: 'pdf' | 'word' | '' }
@Component({
  components: {
    pdfItem
  }
})
export default class pdfOption extends Vue {
  private fileType: fileType = ['pdf', 'word']
  fileList: Array<File> = []
  AllFileData: Array<object> = []
  showDelPDF: boolean = false
  searchFileData: Array<File> = []
  dialogVisible: boolean = false
  searchTimer: number | undefined = undefined
  ruleForm: ruleForm = {
    direction: '',
    type: ''
  }
  searchData: string = ''
  options = [{ value: 'pdf' }, { value: 'word' }]
  resetruleForm() {
    this.ruleForm = {
      direction: '',
      type: ''
    }
    while (this.fileList.length) {
      this.fileList.pop()
    }
  }

  addPdf() {
    this.dialogVisible = true
  }
  filterSearchData() {
    if (this.searchTimer) {
      clearTimeout(this.searchTimer)
    }
    this.searchTimer = setTimeout(() => {
      this.filterSearch()
      clearTimeout(this.searchTimer)
    }, 200)
  }
  handleExceed(files: any, fileList: any) {
    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
  }
  changeFile(e: File, fileArr: Array<File>) {
    this.fileList = fileArr
  }
  filterSearch() {
    let templateArr: Array<any> = []
    this.AllFileData.filter((item: any) => {
      return item.name.indexOf(this.searchData) > -1
    }).forEach((item: any) => {
      let isAll = true
      templateArr.forEach((items, index) => {
        if (templateArr[index][item.type]) {
          isAll = false
          templateArr[index][item.type].push(item)
        }
      })
      if (isAll) {
        templateArr.push({ [item.type]: [item] })
      }
    })
    this.searchFileData = templateArr
  }
  searchFile() {
    this.$axios.post('/pdf/search').then(res => {
      console.log(res.data)
      let data = res.data
      this.AllFileData = res.data.data
      let templateArr: Array<any> = []
      data.error === -1 &&
        data.data.forEach((item: any) => {
          let isAll = true
          templateArr.forEach((items, index) => {
            if (templateArr[index][item.type]) {
              isAll = false
              templateArr[index][item.type].push(item)
            }
          })
          if (isAll) {
            templateArr.push({ [item.type]: [item] })
          }
        })
      this.searchFileData = templateArr
    })
  }
  created() {
    this.searchFile()
  }
  upload() {
    let formData = new FormData()
    let file = this.fileList.map(item => (item as any).raw)
    console.log(this.fileList)
    for (const key in file) {
      formData.append('fileList', file[key])
    }

    // formData.append("fileList", (this.fileList[0] as any).raw);
    formData.append('username', this.$store.state.user.userInfo.username)
    formData.append('direction', this.ruleForm.direction)
    formData.append('type', this.ruleForm.type)
    this.$axios
      .post('/upload/PDF', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(res => {
        console.log(res)
        if (res.data.error === -1) {
          this.dialogVisible = false
          this.$message.success('上传成功')
          this.resetruleForm()
          this.searchFile()
        } else {
          this.$message.warning('上传失败')
        }
      })
    this.dialogVisible = true
  }
}
</script>

<style lang="less" scoped>
.pdf {
  padding: 90px 50px 0;
  .pdf-header {
    display: flex;
    width: 100%;
    height: 90px;
    background-color: #fff;
    position: absolute;
    box-sizing: border-box;
    padding: 0 50px;
    top: 0;
    left: 0;
    justify-content: space-between;
    align-items: center;
  }
  .box-card {
    margin-bottom: 50px;
    .card-body {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>